<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>和达</title>
    <style>
        html,
        body {
            background-color: #000;
        }

        .display-flex {
            display: flex;
        }

        .flex-1 {
            flex: 1
        }

        .flex-1>div {
            width: 10rem;
            height: 10rem;
        }

        .container {
            color: #fff;
            padding: 0 15px;
        }

        .table {
            width: 100%;
            border: solid #add9c0;
            border-width: 1px 0px 0px 1px;
        }

        th,
        td {
            width: 5.88%;
            display: table-cell;
            text-align: center;
            border: solid #add9c0;
            border-width: 0px 1px 1px 0px;
            padding: 10px 0px;
        }
    </style>
    <script>
        window.onresize = font_with;
        function font_with() {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body;
            if (clientWidth < 750) {
                var font = clientWidth * 20 / 750 > 20 ? 20 : clientWidth * 20 / 750;
                document.querySelector("html").style.fontSize = font + "px";
            } else {
                document.querySelector("html").style.fontSize = "20px";
            }
        };
    </script>
</head>

<body>
    <header>全市供水用户数分类汇总概况</header>
    <div id="vm">
        <div class="total display-flex">
            <div class="flex-1">
                <div id="pie-main-1"></div>
            </div>
            <div class="flex-1">
                <div id="pie-main-2"></div>
            </div>
            <div class="flex-1">
                <div id="pie-main-3"></div>
            </div>
            <div class="flex-1">
                <div id="pie-main-4"></div>
            </div>
            <div class="flex-1">
                <div id="pie-main-5"></div>
            </div>
        </div>
        <div class="container">
            <table class="table">
                <thead>
                    <tr>
                        <th colspan="17">全市供水用户数概况</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td rowspan="2">营销公司</td>
                        <td rowspan="2">合计</td>
                        <td colspan="3">用水性质</td>
                        <td colspan="4">缴费方式</td>
                        <td colspan="5">抄表方式</td>
                        <td colspan="3">抄表周期</td>

                    </tr>
                    <tr>
                        <td>居民</td>
                        <td>非居民</td>
                        <td>特种</td>
                        <td>代扣</td>
                        <td>现金</td>
                        <td>托收</td>
                        <td></td>
                        <td>手持抄表机</td>
                        <td></td>
                        <td>有线远传</td>
                        <td>无线远传</td>
                        <td>人工抄表</td>
                        <td>每月抄表</td>
                        <td>单月抄表</td>
                        <td>双月抄表</td>
                    </tr>
                    <tr v-for="(item, i) in totalData" :key="i">
                        <td :bind="i"></td>
                        <td>非居民</td>
                        <td>居民</td>
                        <td>非居民</td>
                        <td>特种</td>
                        <td>代扣</td>
                        <td>现金</td>
                        <td>托收</td>
                        <td></td>
                        <td>手持抄表机</td>
                        <td></td>
                        <td>有线远传</td>
                        <td>无线远传</td>
                        <td>人工抄表</td>
                        <td>每月抄表</td>
                        <td>单月抄表</td>
                        <td>双月抄表</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#vm',
        data: {
            totalData: {},  // 各个公司统计的数据
            colors: {
                '公司1': { start: '#A5CC18', end: '#22E96E' },
                '公司2': { start: '#7A9D5D', end: '#4D6F97' },
                '公司3': { start: '#89CBEC', end: '#339476' },
                '公司4': { start: '#4FBE31', end: ' #38E28F' },
                '公司5': { start: '#D95B8E', end: '#19DE23' },
                '公司6': { start: '#24F385', end: '#32F6A2' },
                '公司7': { start: '#D81D5F', end: '#246C2D' },
                '公司8': { start: '#28B644', end: '#354A73' },
                '公司9': { start: '#AF7292', end: '#6CD4C5' },
                '公司10': { start: '#78A1A7', end: '#618E8F' },
                '特种': { start: '#86C5E4', end: '#309070' },
                '非居民': { start: '#7EA159', end: '#496B9D' },
                '居民': { start: '#3CE45D', end: '#1DEB72' },
                '托收': { start: '#23D528', end: '#D75D8D' },
                '现金': { start: '#4DC038', end: '#39E18B' },
                '代扣': { start: '#49C749', end: '#46CD58' },
                '': { start: '#9DB064', end: '#57AD74' },
                // '': {start: '#9DB064', end: '#57AD74'},
                '人工抄表': { start: '#4FBE31', end: ' #38E28F' },
                '无线远传': { start: '#D95B8E', end: '#19DE23' },
                '有线远传': { start: '#24F385', end: '#32F6A2' },
                '手持抄表机': { start: '#D81D5F', end: '#246C2D' },
                '双月抄表': { start: '#28B644', end: '#354A73' },
                '单月抄表': { start: '#AF7292', end: '#6CD4C5' },
                '每月抄表': { start: '#78A1A7', end: '#618E8F' },
            }
        },
        created: function () {
            // this.totalData = this.filterData();
        },
        mounted: function () {
            this.pie_first_data();
        },
        methods: {
            getData: function () {
                if (window.fetch) {
                    return fetch('./data/data.json', {
                        method: 'GET'
                    })
                }
            },
            /*
               数据处理
            */
            filterData: async function () {
                let res = await this.getData();
                let resJson = await res.json();
                let arrGS = {}, arrYSXZ = {}, arrJFFS = {}, arrCBFS = {}, arrCBZQ = {};
                let arrData = resJson.resultMaps && resJson.resultMaps.reduce((obj, item) => {
                    // 统计  用于饼状图
                    arrGS[item.SMFID] = arrGS[item.SMFID] ? arrGS[item.SMFID] + (item.HS - 0) : item.HS - 0;
                    arrYSXZ[item.PFPID] = arrYSXZ[item.PFPID] ? arrYSXZ[item.PFPID] + (item.HS - 0) : item.HS - 0;
                    arrJFFS[item.JFFS] = arrJFFS[item.JFFS] ? arrJFFS[item.JFFS] + (item.HS - 0) : item.HS - 0;
                    arrCBFS[item.CBFS] = arrCBFS[item.CBFS] ? arrCBFS[item.CBFS] + (item.HS - 0) : item.HS - 0;
                    arrCBZQ[item.CBZQ] = arrCBZQ[item.CBZQ] ? arrCBZQ[item.CBZQ] + (item.HS - 0) : item.HS - 0;
                    item.JFFS = item.JFFS ? item.JFFS : 'JFFS-Other';
                    item.CBFS = item.CBFS ? item.CBFS : 'CBFS-Other';
                    if (obj[item.SMFID]) {
                        obj[item.SMFID]['total'] = obj[item.SMFID]['total'] + (item.HS - 0);
                        obj[item.SMFID][item.PFPID] = ((obj[item.SMFID][item.PFPID] ? obj[item.SMFID][item.PFPID] : 0) - 0) + (item.HS - 0);
                        obj[item.SMFID][item.JFFS] = ((obj[item.SMFID][item.JFFS] ? obj[item.SMFID][item.JFFS] : 0) - 0) + (item.HS - 0);
                        obj[item.SMFID][item.CBFS] = ((obj[item.SMFID][item.CBFS] ? obj[item.SMFID][item.CBFS] : 0) - 0) + (item.HS - 0);
                        obj[item.SMFID][item.CBZQ] = ((obj[item.SMFID][item.CBZQ] ? obj[item.SMFID][item.CBZQ] : 0) - 0) + (item.HS - 0);
                    } else {
                        obj[item.SMFID] = {};
                        obj[item.SMFID]['total'] = item.HS - 0;
                        obj[item.SMFID][item.PFPID] = item.HS - 0;
                        obj[item.SMFID][item.CBFS] = item.HS - 0;
                        obj[item.SMFID][item.JFFS] = item.HS - 0;
                        obj[item.SMFID][item.CBFS] = item.HS - 0;
                    }
                    return obj;
                }, {});
                this.totalData = arrData;
                return { arrData: arrData, arrGS: arrGS, arrYSXZ: arrYSXZ, arrJFFS: arrJFFS, arrCBFS: arrCBFS, arrCBZQ: arrCBZQ };
            },
            initAreaECharts: function (dom, data) {
                let myChart = echarts.init(dom);
                let app = { title: '嵌套环形图' }, option = null;
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} <br/> {c}"
                    },
                    legend: {
                        orient: 'vertical',
                        show: false,
                        x: 'left',
                        y: 'bottom'
                    },
                    graphic: {
                        type: 'text',
                        left: 'center',
                        top: 'center',
                        style: {
                            text: '66.07万\n 用户',
                            textAlign: 'center',
                            fill: '#000',
                            width: 30,
                            height: 30
                        }
                    },
                    series: [
                        {
                            name: '面积模式',
                            type: 'pie',
                            radius: ['22.5%', '32.5%'],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            labelLine: {
                                normal: {
                                    length: 10,
                                    length2: 35,
                                    lineStyle: {
                                        color: '#333'
                                    }
                                }

                            },
                            label: {
                                normal: {
                                    formatter: '{b|{b}}\n{c|{c}}',
                                    borderWidth: 0,
                                    borderRadius: 4,
                                    padding: [0, -35],
                                    rich: {
                                        b: {
                                            fontSize: 8,
                                            lineHeight: 12,
                                            color: 'rgb(255,255,255)'
                                        },
                                        c: {
                                            fontSize: 8,
                                            lineHeight: 12,
                                            color: 'rgb(188,166,4)'
                                        },
                                        hr: {
                                            borderColor: '#333',
                                            width: '100%',
                                            borderWidth: 0.5,
                                            height: 0
                                        }
                                    }
                                }
                            },
                            data: data
                        }
                    ]
                };
                myChart.setOption(option, true);
            },
            initNorEcharts: function (dom, data) {
                let myChart = echarts.init(dom);
                let app = { title: '嵌套环形图' }, option = null;
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} <br/>{c}"
                    },
                    legend: {
                        orient: 'vertical',
                        show: false,
                        x: 'left',
                        data: []
                    },
                    series: [

                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['30%', '55%'],
                            labelLine: {
                                normal: {
                                    length: 10,
                                    length2: 50,
                                    lineStyle: {
                                        color: '#333'
                                    }
                                }

                            },
                            label: {
                                normal: {
                                    formatter: '{b|{b}}\n{c|{c}}',
                                    borderWidth: 0,
                                    borderRadius: 4,
                                    padding: [0, -50],
                                    rich: {
                                        b: {
                                            fontSize: 8,
                                            lineHeight: 12,
                                            color: 'rgb(255,255,255)'
                                        },
                                        c: {
                                            fontSize: 8,
                                            lineHeight: 12,
                                            color: 'rgb(188,166,4)'
                                        },
                                        hr: {
                                            borderColor: '#333',
                                            width: '100%',
                                            borderWidth: 0.5,
                                            height: 0
                                        }
                                    }
                                }
                            },
                            data: data
                        }
                    ]
                };
                myChart.setOption(option, true);
            },
            pie_first_data: async function () {
                let dom = this.$el;
                var total = await this.filterData();
                // 绘制饼状图
                this.initAreaECharts(dom.querySelector("#pie-main-1"), this.ObjToArr(total.arrGS));
                this.initNorEcharts(dom.querySelector("#pie-main-2"), this.ObjToArr(total.arrYSXZ));
                this.initNorEcharts(dom.querySelector("#pie-main-3"), this.ObjToArr(total.arrJFFS));
                this.initNorEcharts(dom.querySelector("#pie-main-4"), this.ObjToArr(total.arrCBFS));
                this.initNorEcharts(dom.querySelector("#pie-main-5"), this.ObjToArr(total.arrCBZQ));
            },
            ObjToArr: function (obj) {
                obj = obj || {};
                let arr = [];
                for (let key in obj) {
                    arr.push({
                        value: obj[key], name: key, itemStyle: {
                            color: {
                                type: 'linear', x: 0,
                                y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: this.colors[key.trim()].start }, { offset: 1, color: this.colors[key.trim()].end }],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    });
                }
                return arr;
            }
        }
    });
</script>